<template>
  <div>
    <DetailPanel :dataSource="detailData" :columns="detailColumns" />
    <TableSearch
      ref="tableSearch"
      :columns="tableColumns"
      :tableData="tableData"
      :pagination-display="paginationDisplay"
      @handleTableData="handleTableData"
    >
      <template slot="tableSearchHeader">
        <div class="panel-header">活动详情列表</div>
        <div class="table-outside-header">
          <div class="search-result-count">
            当前搜索结果<strong>{{ tableData.totalCount || 0 }}</strong
            >条
          </div>
          <el-button
            type="primary"
            icon="el-icon-download"
            class="table-outside-btn"
            @click="handleExport"
            v-if="exportBtnVisible"
            >导出</el-button
          >
        </div>
      </template>
    </TableSearch>
  </div>
</template>
<script>
import Big from 'big.js'
import DetailPanel from '@/components/DetailPanel'
import TableSearch from '@/components/TableSearch'
import { activityDetail, exportActDetail } from '@/api/activity'
import { exportExcel } from '@/utils'
import { typeMap } from '@/utils/format'
import dayjs from 'dayjs'

export default {
  name: 'ActivityDetail',
  components: { DetailPanel, TableSearch },
  data() {
    return {
      detailData: {},
      loaded: false,
      detailColumns: [
        {
          label: ' 活动ID',
          value: 'id',
        },
        {
          label: '活动名称',
          value: 'actName',
        },
        {
          label: '开始时间',
          value: 'actStart',
          formatter: () => {
            return dayjs(this.detailData.actStart).format('YYYY-MM-DD HH:mm:ss')
          },
        },
        {
          label: '结束时间',
          value: 'actEnd',
          formatter: () => {
            return dayjs(this.detailData.actEnd).format('YYYY-MM-DD HH:mm:ss')
          },
        },
        {
          label: '活动类型',
          value: 'actType',
          formatter: (data) => {
            return typeMap.actType[data.actType]
          },
        },
        {
          label: '优惠详情',
          value: 'remark',
        },
        {
          label: '临充优惠(元)',
          value: 'voucherBill.chargeBillDiscountTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: '时长卡优惠(元)',
          value: 'voucherBill.timeCardDiscountTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: '和能量优惠(元)',
          value: 'voucherBill.andEnergyDiscountTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: ' 预算剩余',
          formatter: (data) => {
            return (
              (data.voucherBill &&
              typeof data.voucherBill.restBudgetMoney === 'number'
                ? (data.voucherBill.restBudgetMoney.toFixed(2) * 100) / 100
                : '--') +
              '/' +
              (data.actBudgetMoney / 100).toFixed()
            )
          },
          ifRender: (data) => {
            return data.actType === 1
          }, //actType===1
        },
        {
          label: ' 预算剩余',
          formatter: (data) => {
            return data.voucherBill &&
              typeof data.voucherBill.restTimeCardNum === 'number'
              ? data.voucherBill.restTimeCardNum + '/' + data.actBudgetNum
              : '--' + '/' + data.actBudgetNum
          },
          ifRender: (data) => {
            return data.actType === 2
          }, //actType===2
        },
        {
          label: '剩余预算',
          formatter: (data) => {
            return data.voucherBill &&
              typeof data.voucherBill.restAndEnergyCardNum === 'number'
              ? data.voucherBill.restAndEnergyCardNum + '/' + data.actBudgetNum
              : '--' + '/' + data.actBudgetNum
          },
          ifRender: (data) => {
            return data.actType === 3
          },
        },
        {
          label: '充电订单量',
          value: 'voucherBill.monthTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: '时长卡订单量',
          value: 'voucherBill.timeCardTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: '和能量订单量',
          value: 'voucherBill.andEnergyBillTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: '套餐订单量',
          value: 'monthlyBill',
          ifRender: (data) => {
            return (
              (data.monthlyBill || data.monthlyBill === 0) &&
              (data.actType === 0 || data.actType === 1)
            )
          },
        },
        {
          label: '临充订单金额(元)',
          value: 'voucherBill.chargeBillPayMoneyTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: '时长卡订单金额(元)',
          value: 'voucherBill.timeCardPayMoneyTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: '和能量订单金额(元)',
          value: 'voucherBill.andEnergyBillMoneyTotal',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
        },
        {
          label: '领取方式',
          value: 'obtainType',
          ifRender: (data) => {
            return (
              data.actType === 1 || data.actType === 2 || data.actType === 3
            )
          }, //actType===1 ||2
          formatter: (data) => {
            return typeMap.obtainType[data.obtainType]
          },
        },
        {
          label: '用户范围',
          value: 'userRange',
          ifRender: (data) => {
            return (
              (data.actType === 1 ||
                data.actType === 2 ||
                data.actType === 3) &&
              data.userRange === 1
            )
          },
          formatter: (data) => {
            return typeMap.userRange[data.userRange]
          },
        },
        {
          label: ' 状态',
          value: 'onLineStatus',
        },
        {
          label: '使用范围',
          value: 'applyRange',
          ifRender: (data) => {
            return data.actType === 0 || data.actType === 1
          },
          formatter: (data) => {
            return typeMap.applyRange[data.applyRange]
          },
        },
        {
          label: '访问量',
          value: 'pageView',
          ifRender: (data) => {
            return data.actType === 1 && data.obtainType === 0
          },
        },
        {
          label: '分享次数',
          value: 'shareTime',
          ifRender: (data) => {
            return data.actType === 1 && data.obtainType === 0
          },
        },
        {
          label: '新增用户数',
          value: 'newUsers',
          ifRender: (data) => {
            return data.actType === 1 && data.obtainType === 0
          },
        },
        {
          label: '参与用户数',
          value: 'partakeTime',
          ifRender: (data) => {
            const index = this.detailColumns.findIndex((item) => {
              return item.value === 'partakeTime'
            })
            this.detailColumns[index].label =
              this.detailData.actType === 1 ? '参与用户数' : '领取用户'
            return data.actType === 1 || data.actType === 2
          },
        },
      ],
      tableData: {},
      paginationDisplay: false,
      // tableBtns: [
      //   {
      //     label: '导出',
      //     click: this.handleExport,
      //     icon: 'el-icon-download',
      //     resourceId:
      //       '/web/activity-management/activityList-management/activityDetail-management/导出',
      //     ifRender: () => {
      //       this.roleType === 'ADMIN' &&
      //         this.detailData.stationNames &&
      //         this.detailData.stationNames.length &&
      //         this.detailData.actType === 2 &&
      //         this.detailData.adminAct
      //     },
      //   },
      // ],
      tableColumns: [
        {
          label: '电站名',
          prop: 'stationName',
          resourceId:
            '/web/activity-management/activityList-management/activityDetail-management/电站名',
        },
        {
          label: '优惠充电人数（人）',
          prop: 'peopleNum',
          resourceId:
            '/web/activity-management/activityList-management/activityDetail-management/优惠充电人数（人）',
          hidden: () => {
            return parseInt(this.$route.params.actType) !== 2
          },
        },
        {
          label: '优惠充电次数（次）',
          prop: 'chargeNum',
          resourceId:
            '/web/activity-management/activityList-management/activityDetail-management/优惠充电次数（次）',
          hidden: () => {
            return parseInt(this.$route.params.actType) !== 2
          },
        },
        {
          label: '优惠充电时长（小时）',
          prop: 'chargeTime',
          resourceId:
            '/web/activity-management/activityList-management/activityDetail-management/优惠充电时长（小时）',
          hidden: () => {
            return parseInt(this.$route.params.actType) !== 2
          },
          formatter: (row) => {
            return new Big(row.chargeTime / 60).toFixed(2)
          },
        },
      ],
    }
  },
  computed: {
    roleType() {
      return this.$store.getters.roleType
    },
    resourceSet() {
      return this.$store.getters.resourceSet
    },
    exportBtnVisible() {
      return (
        this.resourceSet.includes(
          '/web/activity-management/activityList-management/activityDetail-management/导出'
        ) &&
        this.roleType === 'ADMIN' &&
        this.detailData.stationNames &&
        this.detailData.stationNames.length &&
        this.detailData.actType === 2 &&
        this.detailData.adminAct
      )
    },
  },
  methods: {
    handleTableData(params) {
      params.actId = parseInt(this.$route.params.actId)
      params.actType = parseInt(this.$route.params.actType)
      activityDetail(params).then((res) => {
        this.detailData = res
        this.tableData = {
          list: this.detailData.stationNames,
          totalCount: this.detailData.stationNames.length,
        }
      })
    },
    handleExport() {
      exportActDetail({
        actId: this.detailData.id,
        actType: this.detailData.actType,
      }).then((res) => {
        exportExcel(res, '活动详情')
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.detail-wrapper {
  margin-bottom: 16px;
}
</style>
